<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText"></block>
			<block slot="content">个人信息</block>
		</cu-custom>
		<view class="container">
			<view>
				<view class="border-none">
					<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseImg">
						<image class="img" :src="client.headImgUrl"></image>
					</button>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">姓名</view>
					<input type="nickname" @change="getNickName" placeholder="请输入姓名" v-model="client.clientName" name="input"></input>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">年龄</view>
					<input placeholder="请输入年龄" v-model="client.age" name="input"></input>
					<button class="cu-btn bg-blue" @click="saveAge">保存</button>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">电话</view>
					<view>{{client.phone}}</view>
					<!-- <input placeholder="请输入手机号" v-model="client.phone" name="input"></input>
					<button class="cu-btn bg-blue" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取</button> -->
				</view>
				<view class="cu-form-group margin-top flex justify-start">
					<view class="title">性别</view>
					<switch class='switch-sex' 
						@change="switchSex" 
						:class="client.sex?'checked':''" 
						:checked="client.sex?true:false"></switch>
				</view>
				
				<!-- <view class="padding flex flex-direction">
					<button @tap="submitClient" class="cu-btn bg-blue lg">修改</button>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad:function(){
			this.state = this.common.getState();
			this.client = this.state.autor.client;
		},
		onShow:function(){
			this.state = this.common.getState();
		},
		data: function() {
			return {
				state: {},
				client: {
					clientId: 1,
					clientName: "",
					headImgUrl: "",
					sex: 0,
					age: "",
					phone: ""
				}
			};
		},
		methods: {
			getNickName: function(e) {
				this.client.clientName = e.detail.value;
				let self = this;
				this.http.put({
					url: "/client/info",
					param: this.client,
				}).then(function(res) {
					self.message.info("修改成功");
					self.state.autor.client = res;
					console.log(res);
					self.common.setAttribute("autor", self.state.autor);
				});
			},
			saveNickName: function() {
				if (this.util.checkStringEmpty(this.client.clientName)) {
					this.message.info("请填写姓名");
					return;
				}
				let self = this;
				console.log(this.client);
				this.http.put({
					url: "/client/info",
					param: this.client,
				}).then(function(res) {
					self.message.info("修改成功");
					self.state.autor.client = res;
					console.log(res);
					self.common.setAttribute("autor", self.state.autor);
				});
			},
			saveAge: function() {
				if (!this.util.isRealNum(this.client.age)) {
					this.message.info("请正确填写年龄");
					return;
				}
				let self = this;
				this.http.put({
					url: "/client/info",
					param: this.client,
				}).then(function(res) {
					self.message.info("修改成功");
					self.state.autor.client = res;
					self.common.setAttribute("autor", self.state.autor);
				});
			},
			getPhoneNumber: function(e) {
				console.log(e.detail.code);
				
				this.http.get({
					url: "/client/login/phone",
					param: {
						code: e.detail.code
					}
				}).then(res => {
					console.log(res);
				});
			},
			chooseImg: function(e) {
				this.client.headImgUrl = e.detail.avatarUrl;
			},
			switchSex: function(e) {
				this.client.sex = e.detail.value;
			},
			submitClient: function() {
				if (this.util.checkStringEmpty(this.client.clientName)) {
					this.message.info("请填写姓名");
					return;
				}
				
				if (this.util.checkStringEmpty(this.client.phone)) {
					this.message.info("请填写电话");
					return;
				}
				
				if (!this.util.isRealNum(this.client.age)) {
					this.message.info("请正确填写年龄");
					return;
				}
				
				let self = this;
				this.http.put({
					url: "/client/info",
					param: this.client,
				}).then(function(res) {
					self.message.info("修改成功");
					self.state.autor.client = res;
					self.common.setAttribute("autor", self.state.autor);
				});
			}
		}
	}
</script>

<style scoped>
	.avatar {
		background-color: rgba(0, 0, 0, 0);
		border: 0px solid red;
		display: flex;
		justify-content: center;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		
	}
	
	.border-none {
		border: 0 solid red;
		display: flex;
		justify-content: center;
	}
	
	.avatar .img {
		width: 100px;
		height: 100px;
	}
</style>
